<template>
  <div class="index">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label name></el-tab-pane>
      <el-tab-pane label name></el-tab-pane>
      <el-tab-pane label="开始" name="a">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="home"><i class="el-icon-monitor"></i>桌面</el-menu-item>
          <el-menu-item index="tels"><i class="el-icon-notebook-2"></i>通讯录</el-menu-item>
          <el-menu-item index="3"><i class="el-icon-user"></i>我的帐号</el-menu-item>
          <el-menu-item index="6"><i class="el-icon-bell"></i>通知</el-menu-item>
          <el-submenu index="7">
            <template slot="title"><i class="el-icon-s-check"></i>公文管理</template>
            <el-menu-item index="7-1"><i class="el-icon-goods"></i>我的公文</el-menu-item>
            <el-menu-item index="7-2"><i class="el-icon-finished"></i>已审公文</el-menu-item>
            <el-menu-item index="7-3"><i class="el-icon-circle-close"></i>未审公文</el-menu-item>
          </el-submenu>
          <el-menu-item index="8"><i class="el-icon-chat-dot-round"></i>聊天室</el-menu-item>
          <el-menu-item index="9"><i class="el-icon-date"></i>预算申请</el-menu-item>
          <el-menu-item index="5"><i class="el-icon-switch-button"></i>安全退出</el-menu-item>
          <el-menu-item index="4"><i class="el-icon-question"></i>帮助中心</el-menu-item>
        </el-menu>
      </el-tab-pane>
      <el-tab-pane label="咨询管理" name="b">咨询管理</el-tab-pane>
      <el-tab-pane label="教务管理" name="c">教务管理</el-tab-pane>
      <el-tab-pane label="市场管理" name="d">市场管理</el-tab-pane>
      <el-tab-pane label="人事管理" name="e">人事管理</el-tab-pane>
      <el-tab-pane label="财务管理" name="f">财务管理</el-tab-pane>
      <el-tab-pane label="系统管理" name="g">系统管理</el-tab-pane>
    </el-tabs>
    <router-view />
    <footer>这是底部导航栏</footer>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      activeName: "a", //一级菜单默认
      activeIndex: "home" //二级菜单默认
    };
  },
  methods: {
    // 一级菜单点击触发效果
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 二级菜单点击触发跳转
    handleSelect(key, pathName) {
      //console.log(key, pathName);
      this.$router.push({ name: pathName });
    }
  }
};
</script>

<style>
  body{
    padding: 0;
    margin: 0;
  }
  .el-tabs{
    margin-bottom: 20px;
  }
  footer{
    width: 100%;
    position:absolute;
    bottom: 0;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #F4F7FA;
  }
</style>
